import { observer } from "mobx-react-lite";
import { useGlobalStore } from "../mobx";
import LG, { LinearGradientProps as LGProps } from "react-native-linear-gradient"
import { getColorStr } from "../themes";
import { useMemo } from "react";

interface LinearGradientProps extends Omit<LGProps, 'colors'> {
    themeColors?: string[]
    colors?: (string | number)[]
    direction?: 'left-right'
}
export const LinearGradient = observer((props: LinearGradientProps) => {
    const { children, themeColors, colors, direction, ...rest } = props
    const { theme } = useGlobalStore()
    
    const getColors = (): (string | number)[] => {
        if (Array.isArray(themeColors)) {
            return themeColors.map((key) => getColorStr(theme, key))
        }
        return colors || []
    }
    
    // 渐变色的方向
    const se = useMemo(() => {
        switch (direction) {
            case 'left-right':
            return {
                start: { x: 0, y: 0.5 },
                end: { x: 1, y: 0.5 }
            }
            default: // 默认是从上到下
            return {
                start: { x: 0.5, y: 0 },
                end: { x: 0.5, y: 1 }
            }
        }
    }, [direction])
    
    return <LG {...se} colors={getColors()} {...rest}>{children}</LG>
})
 
 